import classNames from "classnames";
import styles from "@pages/home/widgets/channel/styles/edit.module.less";
import React, { useEffect, useState } from "react";

interface Props {
  render: boolean;
  value: boolean;
  onChange: (value: boolean) => void;
}

export default function EditButton({ render, value, onChange }: Props) {
  // 用于控制按钮显示完成还是编辑
  const [editing, setEditing] = useState(value);

  // 监听外部状态是否变化
  useEffect(() => {
    // 将外部状态同步到内部
    setEditing(value);
  }, [value]);

  // 监听内部状态是否变化
  useEffect(() => {
    // 将状态同步到外部
    onChange(editing);
  }, [editing, onChange]);
  
   useEffect(() => {
    // 监听是否渲染按钮, 如果按钮不渲染了, 取消编辑状态
    if (!render) {
      setEditing(false);
    }
  }, [render]);

  return render ? (
    <button
      onClick={() => {
        setEditing(!editing);
      }}
      className={classNames({ [styles.active]: editing })}
    >
      {editing ? "完成" : "编辑"}
    </button>
  ) : null;
}